<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="timeIndex"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<div class="content-secondary"> 
			<div id="jqm-homeheader"> 
				<h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
				<p>A Date and Time Picker plugin for jQueryMobile</p> 
			</div> 
			
			<div class="scriptdemos sidebar"></div>
		</div>
		
		<div class="content-primary"> 
			<div data-role="collapsible-set" data-mini="true">
				<div data-role="collapsible" data-collapsed="false"> 
					<h2>Simple Linked Inputs</h2>
				
					<div data-role="fieldcontain">
						<label for="linked1">Date</label>
						<input name="linked1" type="text" data-role="datebox" data-options='{"mode": "datebox", "closeCallback": "$(\"#linked2\").datebox(\"open\");" }' id="linked1" />
					</div>
					<div data-role="fieldcontain">
						<label for="linked2">Time</label>
						<input name="linked2" type="text" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFormat":12}' id="linked2" />
					</div>
					
					<p>You can also link inputs easily. (Show with optional 'center popup' option)</p>
					
					<pre class="prettyprint">&lt;div data-role="fieldcontain"&gt;
    &lt;label for="linked1"&gt;Date&lt;/label&gt;
    &lt;input name="linked1" type="text" data-role="datebox" id="linked1" 
        data-options='{"mode": "datebox", "closeCallback": "$(\"#linked2\").datebox(\"open\");"}' /&gt;
&lt;/div&gt;
&lt;div data-role="fieldcontain"&gt;
    &lt;label for="linked2"&gt;Time&lt;/label&gt;
    &lt;input name="linked2" type="text" data-role="datebox" id="linked2"
        data-options='{"mode": "timebox", "overrideTimeFormat":12}' /&gt;
&lt;/div&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Advanced Linked Inputs</h2>
					<p>A Form showing checkin and checkout dates.  With the addition of splitting the date into parts for the backend.</p>
				
					<div id="checklinkform">
						<div data-role="fieldcontain">
							<label for="checkin">Check-in:</label>
							<input name="checkin" id="checkin" type="date" data-role="datebox" data-options='{"closeCallback":"linkedCheckin", "closeCallbackArgs":["checkin"], "mode": "calbox", "focusMode": true, "centerWindow": true, "afterToday": true}'>
						</div>
						<div data-role="fieldcontain">
							<input name="checkin_monthday" type="hidden" size="2" id="checkin_monthday" />
							<input name="checkin_year_month" type="hidden" size="7" id="checkin_year_month" />
						</div>
						<div data-role="fieldcontain">
							<label for="checkout">Check-out:</label>
							<input name="checkout" id="checkout" type="date" data-role="datebox" data-options='{"calHighToday":false, "closeCallback":"linkedCheckin", "closeCallbackArgs":["checkout"], "mode": "calbox", "focusMode": true, "centerWindow": true}'>
						</div>
						<div data-role="fieldcontain">
							<input name="checkout_monthday" type="hidden" size="2" id="checkout_monthday" />
							<input name="checkout_year_month" type="hidden" size="7" id="checkout_year_month" />
						</div>
					</div>
					<script type="text/javascript">
					linkedCheckin = function (date, name) {
						var self     = this,
							nextday  = date.copy([0,0,1]);
							today     = new Date();
							diff     = parseInt((date - today) / ( 1000 * 60 * 60 * 24 ),10);
							diffstrt = (diff * -1)-2;
						
						$('#'+name+'_year_month').val(self._formatter('%Y-%m', date));
						$('#'+name+'_monthday').val(self._formatter('%d', date));
		
						$('#checkoutput').text($('#checklinkform input').serialize());
						
						if ( name === "checkin" ) {
							$('#checkout').datebox('setTheDate', nextday);
							$('#checkout').trigger('datebox', {'method':'doset'});
							$('#checkout').datebox({"minDays": diffstrt});
							$('#checkout').datebox('open');
						}
					}
					</script>
					<strong>RESULT</strong>
					<pre class="prettyprint"><span id="checkoutput"> </span></pre>
					<a href="#sourceADVLINKHTML" data-rel="popup" data-role="button" data-inline="true"  data-mini="true" data-transition="pop">HTML Source</a>
                    <div data-role="popup" id="sourceADVLINKHTML" class="ui-content">
					<strong>HTML</strong><pre class="prettyprint">
&lt;div id="checklinkform"&gt;					
    &lt;div data-role="fieldcontain"&gt;
        &lt;label for="checkin"&gt;Check-in:&lt;/label&gt;
        &lt;input name="checkin" id="checkin" type="date" data-role="datebox"
            data-options='{"closeCallback":"linkedCheckin", "closeCallbackArgs":["checkin"], "mode": "calbox", "focusMode": true, "centerWindow": true, "afterToday": true}'&gt;
    &lt;/div&gt;
    &lt;div data-role="fieldcontain"&gt;
        &lt;input name="checkin_monthday" type="hidden" size="2" id="checkin_monthday" /&gt;
        &lt;input name="checkin_year_month" type="hidden" size="7" id="checkin_year_month" /&gt;
    &lt;/div&gt;
    &lt;div data-role="fieldcontain"&gt;
        &lt;label for="checkout"&gt;Check-out:&lt;/label&gt;
        &lt;input name="checkout" id="checkout" type="date" data-role="datebox" 
            data-options='{"calHighToday":false, "closeCallback":"linkedCheckin", "closeCallbackArgs":["checkout"], "mode": "calbox", "focusMode": true, "centerWindow": true}'&gt;
    &lt;/div&gt;
    &lt;div data-role="fieldcontain"&gt;
        &lt;input name="checkout_monthday" type="hidden" size="2" id="checkout_monthday" /&gt;
        &lt;input name="checkout_year_month" type="hidden" size="7" id="checkout_year_month" /&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
					<a href="#sourceADVLINKJQ" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">jQuery Source</a>
                    <div data-role="popup" id="sourceADVLINKJQ" class="ui-content">
					<strong>jQuery</strong>
					<pre class="prettyprint">
linkedCheckin = function (date, name) {
      // The widget itself
  var self     = this,
      // The day after whatever just got set
      // btw, Date().copymod() is an extension of datebox - basically:
      // copymod([y,m,d,h,i,s],[y,m,d,h,i,s]) : 
      //   * This first array is an OFFSET of the original
      //   * The second is an OVERRIDE of the original (if non-zero)
      nextday  = date.copymod([0,0,1]);
      // Today
      today    = new Date();
      // The difference of today and whatever got set (secs)
      diff     = parseInt((date - today) / ( 1000 * 60 * 60 * 24 ),10);
      // The same difference, in days (+2)
      diffstrt = (diff * -1)-2;
        
  // Lets fill in the other fields.
  $('#'+name+'_year_month').val(self._formatter('%Y-%m', date));
  $('#'+name+'_monthday').val(self._formatter('%d', date));
  // Update the seen output
  $('#checkoutput').text($('#checklinkform input').serialize());
        
  // If we edited the checkin date, more work to do
  if ( name === "checkin" ) {
    // Ok, so in steps: (nuke the comments)
    // Set the (internal) checkout date to be whatever was picking in checkin +1 day
    $('#checkout').datebox('setTheDate', nextday);
    // Show that to the user
    $('#checkout').trigger('datebox', {'method':'doset'});
    // Make sure that minDays won't let them check out same day or earlier
    $('#checkout').datebox({"minDays": diffstrt});
    // Open it up
    $('#checkout').datebox('open');
  }
}</pre>
					</div>
					</div>
				</div>
			</div>
		</div> 
		
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
